Tengo debajo de JSX -
<FormGroup> <Label for="exampleEmail" style={{fontWeight:"bold"}}>What is your e-mail address?</Label> <Input type="email" name="email" id="exampleEmail" onChange={(e)=>setStateForProperties(e)} /> </FormGroup> <FormGroup> <Label for="examplePassword" style={{fontWeight:"bold"}}>What is your password?</Label> <Input type="password" name="password" id="examplePassword" onChange={(e)=>setStateForProperties(e)}/> </FormGroup>
Declaraciones Estatales -
const iLoginCreds ={ userName:'', password:'' } const [loginCreds, setLoginCredentials] = useState(iLoginCreds)
onChange Cambio de estado del método -
function setStateForProperties(e) { alert(e.target.id); switch (e.target.id) { case 'exampleEmail': setLoginCredentials(...loginCreds,{ userName:e.target.value }); break; case 'examplePassword': setLoginCredentials(... loginCreds,{ password:e.target.value }); default: break; } console.log(loginCreds); }
Error -
Cuando escribo algo en el cuadro de texto (al activar el evento onchange), recibo un error:
TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
Debe destruct
las previous object properties
y devolver un new object
después de fusionarse con el nuevo.
setLoginCredentials({ ...loginCreds, ...{userName:e.target.value} })
En lugar de hacer esto:
setLoginCredentials(...loginCreds, { userName:e.target.value });
, que pasa 2 argumentos a useState
, debe mover las llaves para rodear ...loginCreds
, así:
setLoginCredentials({...loginCreds, userName:e.target.value });
Deberías hacer lo mismo con la contraseña.
Esto cambiará solo una propiedad en el objeto. Reaccionar Ganchos useState() con Objeto